<template>
  <div class="forum-detail">
    <n-card content-style="padding: 15px;">
      <template #header>
        <n-skeleton v-if="loading" text width="60%" />
        <template v-else>
          <h1 class="-ml-2">这个花花为什么买了一盒草莓🍓</h1>
          <div class="author text-sm pt-2">
            <span class="pr-4">📝：小弟弟</span>
            <span>👍：2356</span>
            <span class="px-4">👀：3333</span>
            <span>💬：3888</span>
          </div>
        </template>
      </template>
      <n-skeleton v-if="loading" text :repeat="6" />
      <template v-else>
        <n-image-group>
          <n-space justify="center">
            <n-image
              width="250"
              src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            />
            <n-image
              width="250"
              src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
            />
          </n-space>
        </n-image-group>
        <div class="forumContent w-2/3 mx-auto rounded-md">
          不要忘了留姓名<br>
          电话和其他事情<br>
          不要说的太快免得我没写下你大名<br>
          或许你不再打来<br>
          我却等到头发白<br>
          希望有一天你会打来
        </div>
        <!-- 点赞评论 -->
        <!-- <div class="good">
          <n-space justify="end" class="items-center">
            <n-gradient-text type="danger">
              2024-03-18
            </n-gradient-text>
            <n-button tertiary circle type="success" class="px-4">👍</n-button>
            <n-button tertiary circle type="info">💬</n-button>
          </n-space>
        </div> -->
        <!-- 分割线 -->
        <n-divider/>
        <!-- 评论 -->
        <forumDiscuss />
      </template>
    </n-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import forumDiscuss from '../components/forum-discuss.vue'
const loading = ref(false)
defineOptions({
  name: 'forumDetail'
})
</script>

<style lang="less" scoped>
.forum-detail {
  background-color: skyblue;
  .forumContent {
    // 渐变背景
    background: linear-gradient(90deg, #ff9a9e 0%, #d4e685 100%);
  }
}
</style>
